<script setup>
import { computed } from 'vue'

const props = defineProps({
  class: String,
  outerClass: String,
  innerClass: String,
  contentClass: String
})

const outerClassComputed = computed(() => ['sm:px-8', props.outerClass, props.class].filter(Boolean))
const innerClassComputed = computed(() => ['relative px-4 sm:px-8 lg:px-12', props.innerClass].filter(Boolean))
const contentClassComputed = computed(() => ['mx-auto max-w-2xl lg:max-w-5xl', props.contentClass].filter(Boolean))
</script>

<template>
  <div :class="outerClassComputed">
    <div class="mx-auto w-full max-w-7xl lg:px-8">
      <div :class="innerClassComputed">
        <div :class="contentClassComputed">
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>
